<template>
    <div id="Partial">
        <div class="img-container flex-center" ref="imgContainer">
            <img :src="image" alt="加载失败" ref="img">
            <div v-show="showPartial" ref="signContainer" class="sign-container">
                <div v-for="(item, index) in partialImages" :key="index" class="signimg" :ref="`img${index}`">
                    <img :src="signImg(item.type)" alt="" @click="showdialog(item)">
                    <!-- <img :src="signImg(item.type)" alt="" @click.stop="showdialog(item)"> -->
                    <!-- <img src="../../assets/img/img.png" alt=""> -->
                </div>
            </div>
        </div>
        <div class="img-pages flex-between">
            <div class="flex-center">
                <span class="tool-tips">显示热点</span>
                <el-switch v-model="showPartial"> </el-switch>
            </div>
            <div>
                <span class="tool-tips">显示热点</span>
                <el-switch v-model="showPartial"> </el-switch>
            </div>
        </div>
        <div class="dialog-container flex-center" v-show="show" ref="dialog">
            <span class="close pointer flex-center" @click="closeDialog">
                <img src="../../assets/img/close.png" alt="" class="pointer">
            </span>
            <div v-if="dialog.type===0">
                <img :src="dialog.src" alt="" style="animation:height .6s ease-out forwards;">
            </div>
            <div v-if="dialog.type===1">
                <video ref="video" :src="dialog.src" autoplay style="animation:height .6s ease-out forwards;" controls controlsList="nodownload"></video>
            </div>
            <div v-if="dialog.type===2" style="animation:height .6s ease-out forwards;">
                {{dialog.text}}
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin/mixin'
export default {
    name: "Partial",
    mixins: [mixin],
    data() {
        return {
            image: '',
            showPartial: true,
            partialImages: [],
            dialog: {},
            show: false
        }
    },
    created() {
        if (this.bsr.image) {
            let suffix = this.getFileSuffix(this.bsr.image)
            this.image = window.$DATADIR + `resc/Partial/${this.bsr.id}/${this.bsr.image.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
        }
        if (this.bsr.touch_points) {
            this.partialImages = this.bsr.touch_points
            this.partialImages.map(v => {
                let suffix = v.file_name.substr(-3, 1).toLowerCase() === 'j' ? '.bosj' : '.bosp'
                switch (v.type) {
                    case 0:
                        v.src = window.$DATADIR + `resc/Partial/${this.bsr.id}/${v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
                        break
                    case 1:
                        v.src = window.$DATADIR + `resc/Partial/${this.bsr.id}/${v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, '.bosm')}`
                        break
                    case 2:
                        v.src = ''
                        break
                }
                delete v.file_name
            })
        }
    },
    mounted() {

        this.getRect()
    },
    methods: {
        showdialog(item) {
            this.show = true
            this.dialog = JSON.parse(JSON.stringify(item))
            if (this.dialog.type === 1) {
                this.$nextTick(() => {
                    this.$refs.video['disablePictureInPicture'] = true
                })
            }
        },
        closeDialog() {
            this.show = false
            this.dialog.type = -1
        },
        signImg(type) {
            switch (type) {
                case 0:
                    return require('../../assets/img/img.png')
                    break
                case 1:
                    return require('../../assets/img/video.png')
                    break
                case 2:
                    return require('../../assets/img/text.png')
                    break
            }
        },
        getRect() {
            let time = setInterval(() => {
                let { width, height, x, y } = this.$refs.img.getBoundingClientRect()
                if (width != 0) {
                    this.$refs.dialog.style.width = width * 0.7 + 'px'
                    this.$refs.dialog.style.height = height * 0.7 + 'px'
                    this.$refs.signContainer.style.width = width + 'px'
                    this.$refs.signContainer.style.height = height + 'px'
                    this.partialImages.forEach((v, i) => {
                        this.$refs[`img${i}`][0].style.left = width * parseFloat(v.x) / 100 + 'px'
                        this.$refs[`img${i}`][0].style.top = height * parseFloat(v.y) / 100 - 60 + 'px'
                    })
                    let style = document.createElement('style')
                    style.type = 'text/css'
                    let keyFrames = `
                        @keyframes height {
                            0%{
                                height:0;
                                opacity: 0;
                            }
                            100%{
                                height:${height * 0.7}px;
                                opacity: 1;
                            }
                        }
                    `
                    style.innerHTML = keyFrames
                    document.getElementsByTagName('head')[0].appendChild(style);
                    this.$refs.dialog.style.animation = 'height .6s ease-out forwards'
                    clearInterval(time)
                }
            })
        }
    }
}
</script>

<style lang="scss">
#Partial {
    .img-container {
        width: 100%;
        height: calc(100vh - 80px);
        vertical-align: bottom;
        overflow: hidden;
        img {
            height: 100%;
        }
        .sign-container {
            position: absolute;
            z-index: 99;
        }
        .signimg {
            position: absolute;
            img {
                width: 50px;
                height: 60px;
            }
        }
    }
    .img-pages {
        max-width: 100vw;
        height: 50px;
        background: #dcdfe7;
        padding: 0 20px;
        .el-switch__core {
            background-color: #bfc6d9;
        }
        .el-switch.is-checked .el-switch__core {
            background-color: #409eff;
        }
        .tool-tips {
            margin-right: 10px;
            margin-top: -3px;
        }
    }
    .dialog-container {
        border: 10px rgba(240, 248, 254, 1) solid;
        border-radius: 8px;
        background-color: rgba(240, 248, 254, 1);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: content-box;
        z-index: 100;
        .close {
            position: absolute;
            font-size: 24px;
            top: -23px;
            right: -23px;
            background-color: #f0f8fe;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            img {
                width: 13px;
                height: 13px;
            }
        }
        img {
            width: 100%;
        }
        video {
            width: 100%;
        }
        video::-webkit-media-controls-fullscreen-button {
            display: none;
        }
    }
}
</style>
